<template>
  <div>
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
             active-text-color="#ff9d00"
    >
      <el-menu-item index="1">足迹</el-menu-item>
      <el-menu-item index="2">评论</el-menu-item>
      <el-menu-item index="3">点赞</el-menu-item>
    </el-menu>

    <div v-show="this.FootmarkOrCommentOrLike == 0" style="text-align: left">
      <div class="block" style="width: 800px; margin-top: 20px">
        <el-timeline>
          <el-timeline-item timestamp="2018/4/12" placement="top">
            <el-card>
              <h4>更新 Github 模板</h4>
              <p>王小虎 提交于 2018/4/12 20:46</p>
            </el-card>
          </el-timeline-item>
          <el-timeline-item timestamp="2018/4/3" placement="top">
            <el-card>
              <h4>更新 Github 模板</h4>
              <p>王小虎 提交于 2018/4/3 20:46</p>
            </el-card>
          </el-timeline-item>
          <el-timeline-item timestamp="2018/4/2" placement="top">
            <el-card>
              <h4>更新 Github 模板</h4>
              <p>王小虎 提交于 2018/4/2 20:46</p>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>

    <div v-show="this.FootmarkOrCommentOrLike == 1">
      <div style="width: 800px; margin-top: 20px; text-align: left">
        <ul>
          <li v-for="item in Comments" style="box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
            <div style="margin-left: 30px; padding-top: 5px; padding-bottom: 20px">
              <div style="margin-top: 15px; padding-bottom: 15px">
                {{item.content}}
              </div>
              <el-button size="medium" style="background-color: gainsboro" @click="linkToScenicOrArtilce(item.topic_id, item.topic_type)">{{item.topic_name}}</el-button>
            </div>
          </li>
        </ul>
      </div>
    </div>


    <div v-show="this.FootmarkOrCommentOrLike == 2">
      <div style="margin-top: 20px">
        <ul>
          <li v-for="item in LikeArticles">
            <ArticleComponent :article="item" style="width: 800px"></ArticleComponent>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import ArticleComponent from "@/components/Article/ArticleComponent";
export default {
  name: "PersonHistory",
  components:{
    ArticleComponent
  },
  data(){
    return{
      FootmarkOrCommentOrLike: 1,
      LikeArticles: [],
      Comments: []
    }
  },
  methods:{
    getLikeArticles: function () {
      this.LikeArticles = [
        {
          id: 123,
          title: "震惊这是文章标题很长很长很长很长很长很长很长很长很长很长很长很长很长很长：",
          cover_image: "https://p1-q.mafengwo.net/s19/M00/2A/69/CoNHGWPqQKEMikvYAAljuw-FJEk.jpeg?imageMogr2%2Fthumbnail%2F%21440x300r%2Fstrip%2Fgravity%2FCenter%2Fcrop%2F%21440x300%2Fquality%2F90",
          user_avatar: "https://img.zcool.cn/community/01a6095f110b9fa8012066219b67d4.png@1280w_1l_2o_100sh.png",
          user_name: "张扬很帅",
          content: "      2020，清晰的记得也是春节🧨，\n" +
              "      即使雷神山已经开始动工，\n" +
              "      即使在 西班牙 🇪🇸已经抢不着口罩，\n" +
              "      即使法航停飞 中国 航班，只能靠毛子航空回国，\n" +
              "      即使第一次机上如临大敌戴上N95😷...\n" +
              "      入境后我依然在盘算，接下来该买哪儿的机票✈️\n" +
              "      这一盘算，\n" +
              "      是整整三年，\n" +
              "      谁也没有想到，疫情会持续如此长的时间；\n" +
              "      谁也没有想到，疫情会影响这么多人，这么多行业；\n" +
              "      谁也没有想到，我们的生活方式已经完全发生改变。",
          updata_time: "2023-2-24 14:30"
        },
        {
          id: 123,
          title: "震惊这是文章标题很长很长很长很长很长很长很长很长很长很长很长很长很长很长：",
          cover_image: "https://p1-q.mafengwo.net/s19/M00/2A/69/CoNHGWPqQKEMikvYAAljuw-FJEk.jpeg?imageMogr2%2Fthumbnail%2F%21440x300r%2Fstrip%2Fgravity%2FCenter%2Fcrop%2F%21440x300%2Fquality%2F90",
          user_avatar: "https://img.zcool.cn/community/01a6095f110b9fa8012066219b67d4.png@1280w_1l_2o_100sh.png",
          user_name: "张扬很帅",
          content: "      2020，清晰的记得也是春节🧨，\n" +
              "      即使雷神山已经开始动工，\n" +
              "      即使在 西班牙 🇪🇸已经抢不着口罩，\n" +
              "      即使法航停飞 中国 航班，只能靠毛子航空回国，\n" +
              "      即使第一次机上如临大敌戴上N95😷...\n" +
              "      入境后我依然在盘算，接下来该买哪儿的机票✈️\n" +
              "      这一盘算，\n" +
              "      是整整三年，\n" +
              "      谁也没有想到，疫情会持续如此长的时间；\n" +
              "      谁也没有想到，疫情会影响这么多人，这么多行业；\n" +
              "      谁也没有想到，我们的生活方式已经完全发生改变。",
          updata_time: "2023-2-24 14:30"
        },
        {
          id: 123,
          title: "震惊这是文章标题很长很长很长很长很长很长很长很长很长很长很长很长很长很长：",
          cover_image: "https://p1-q.mafengwo.net/s19/M00/2A/69/CoNHGWPqQKEMikvYAAljuw-FJEk.jpeg?imageMogr2%2Fthumbnail%2F%21440x300r%2Fstrip%2Fgravity%2FCenter%2Fcrop%2F%21440x300%2Fquality%2F90",
          user_avatar: "https://img.zcool.cn/community/01a6095f110b9fa8012066219b67d4.png@1280w_1l_2o_100sh.png",
          user_name: "张扬很帅",
          content: "      2020，清晰的记得也是春节🧨，\n" +
              "      即使雷神山已经开始动工，\n" +
              "      即使在 西班牙 🇪🇸已经抢不着口罩，\n" +
              "      即使法航停飞 中国 航班，只能靠毛子航空回国，\n" +
              "      即使第一次机上如临大敌戴上N95😷...\n" +
              "      入境后我依然在盘算，接下来该买哪儿的机票✈️\n" +
              "      这一盘算，\n" +
              "      是整整三年，\n" +
              "      谁也没有想到，疫情会持续如此长的时间；\n" +
              "      谁也没有想到，疫情会影响这么多人，这么多行业；\n" +
              "      谁也没有想到，我们的生活方式已经完全发生改变。",
          updata_time: "2023-2-24 14:30"
        },
        {
          id: 123,
          title: "震惊这是文章标题很长很长很长很长很长很长很长很长很长很长很长很长很长很长：",
          cover_image: "https://p1-q.mafengwo.net/s19/M00/2A/69/CoNHGWPqQKEMikvYAAljuw-FJEk.jpeg?imageMogr2%2Fthumbnail%2F%21440x300r%2Fstrip%2Fgravity%2FCenter%2Fcrop%2F%21440x300%2Fquality%2F90",
          user_avatar: "https://img.zcool.cn/community/01a6095f110b9fa8012066219b67d4.png@1280w_1l_2o_100sh.png",
          user_name: "张扬很帅",
          content: "      2020，清晰的记得也是春节🧨，\n" +
              "      即使雷神山已经开始动工，\n" +
              "      即使在 西班牙 🇪🇸已经抢不着口罩，\n" +
              "      即使法航停飞 中国 航班，只能靠毛子航空回国，\n" +
              "      即使第一次机上如临大敌戴上N95😷...\n" +
              "      入境后我依然在盘算，接下来该买哪儿的机票✈️\n" +
              "      这一盘算，\n" +
              "      是整整三年，\n" +
              "      谁也没有想到，疫情会持续如此长的时间；\n" +
              "      谁也没有想到，疫情会影响这么多人，这么多行业；\n" +
              "      谁也没有想到，我们的生活方式已经完全发生改变。",
          updata_time: "2023-2-24 14:30"
        },
        {
          id: 123,
          title: "震惊这是文章标题很长很长很长很长很长很长很长很长很长很长很长很长很长很长：",
          cover_image: "https://p1-q.mafengwo.net/s19/M00/2A/69/CoNHGWPqQKEMikvYAAljuw-FJEk.jpeg?imageMogr2%2Fthumbnail%2F%21440x300r%2Fstrip%2Fgravity%2FCenter%2Fcrop%2F%21440x300%2Fquality%2F90",
          user_avatar: "https://img.zcool.cn/community/01a6095f110b9fa8012066219b67d4.png@1280w_1l_2o_100sh.png",
          user_name: "张扬很帅",
          content: "      2020，清晰的记得也是春节🧨，\n" +
              "      即使雷神山已经开始动工，\n" +
              "      即使在 西班牙 🇪🇸已经抢不着口罩，\n" +
              "      即使法航停飞 中国 航班，只能靠毛子航空回国，\n" +
              "      即使第一次机上如临大敌戴上N95😷...\n" +
              "      入境后我依然在盘算，接下来该买哪儿的机票✈️\n" +
              "      这一盘算，\n" +
              "      是整整三年，\n" +
              "      谁也没有想到，疫情会持续如此长的时间；\n" +
              "      谁也没有想到，疫情会影响这么多人，这么多行业；\n" +
              "      谁也没有想到，我们的生活方式已经完全发生改变。",
          updata_time: "2023-2-24 14:30"
        },
      ]
    },
    getComments: function (){
      this.Comments = [
        {
          id: 11111,
          content: "评论test1",
          topic_id: 2222,
          topic_type: 1,
          topic_name: "这是一篇被回复的文章"
        },
        {
          id: 2222,
          content: "评论test1",
          topic_id: 2222,
          topic_type: 2,
          topic_name: "震惊这是文章标题啊啊啊啊啊啊啊啊"
        },
      ]
    },
    linkToScenicOrArtilce:function (id, type) {
      // type == 1 跳转到景点
      if (type == 1){
        var url = '/scenic/' + id
      }
      // type == 2 跳转到文章
      if (type == 2){
        var url = '/article/' + id
      }
      this.$router.push(url)
    },
    handleSelect(key, keyPath) {
      // 选择足迹、评论、点赞
      if (key == 1){
        this.FootmarkOrCommentOrLike = 0;
      }
      if (key == 2){
        this.FootmarkOrCommentOrLike = 1;
      }
      if (key == 3){
        this.FootmarkOrCommentOrLike = 2;
      }
    },
  },
  mounted() {
    this.getLikeArticles()
    this.getComments()
  }
}
</script>

<style scoped>

</style>